html, body
    {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
 
    color: #000;
    }

div, input, select, textarea { font-family: inherit; }

/* framework */

#Outer { text-align: center; }
/* #Inner { width: 100%; min-width: 320px; max-width: 1140px; margin: 0 auto; background: #fcfff4; text-align: left; }*/
/* #Inner { width: 100%; min-width: 320px; max-width: 1275px; margin: 0 auto; background: #fff; text-align: left; } */
 #Inner { width: 100%; min-width: 320px; max-width: 1500px; margin: 0 auto; background: #fff; text-align: left; }
/* #Inner { width: 100%; min-width: 320px; max-width: 1350px; margin: 0 auto; background: #fff; text-align: left; }*/


/*smaller site below 
#Inner { width: 100%; min-width: 320px; max-width: 1275px; margin: 0 auto; background: #fff; text-align: left; }
*/




/* header */

#HdrOuter { border: 3px solid #003300; padding: 2px; }
/* change following bg for header bg color  - original height = 102*/
/* #HdrInner { border: 0px; text-align: left; position: relative; height: 70px; background: #6d5700;} */
/* #HdrInner { border: 0px; text-align: center; position: relative; height: 80px; background: #003300;}*/
#HdrInner { border: 0px; text-align: center; position: relative; height: 135px; background: #003300;}

/* header image - 70px*/

#HdrInner img.logoImage { height: 60px; vertical-align: middle; float: left; margin-bottom:3px;margin-right:10px;margin-top:4px;margin-left:10px;border: 1px solid #fff;padding:2px;}

#HdrInner p { font-size: 17px; color: #003300; }


#LogoContainer{ width: 100%; min-width: 320px; max-width: 1500px; margin: 0 auto; text-align: center; height:100%;}










#headertextmiddle{ display:inline-block;padding:12px;max-width:600px;height:96%;color:#fff;text-align:center;margin-left:10px;font-family:'Times New Roman';letter-spacing:1px; }

#headertextmiddle a{ color:#FFF;}


@media screen and (max-width: 1191px){
	#headertextmiddle {display: none;}
	
}





/* header - responsive */

.headertextright{ font-size:13px;color:#fff;margin-top:15px;margin-right:10px;display:inline-block;height:107px;float:right;width:400px;text-align:left;padding:0px;}


@media only screen and (min-width: 1500px) {
        /* styles for browsers larger than 1500px; */
		.headertextright{ width:600px;}
    }
	@media only screen and (min-width: 1400px) {
        /* styles for browsers larger than 1500px; */
		.headertextright{ width:500px;}
    }
	
		@media screen and (max-width: 1300px) {
	.headertextright{width:300px;}
}

	
	@media screen and (max-width: 1180px) {
	.headertextright{width:600px;}
}

@media screen and (max-width: 1000px) {
	.headertextright{width:500px;}
}

@media screen and (max-width: 900px) {
	.headertextright{width:400px;}
}

@media screen and (max-width: 700px) {
	.headertextright{display: none;}
}















@media screen and (max-width: 1300px) {
/*#HdrInner img.logoBrand {  width: 350px; height: auto; margin-left:20px;}*/
#LHS { display: none;}

}



@media screen and (min-width:651px){
	#HdrInner img.logoBrand { vertical-align: middle;  margin-top:10px; margin-bottom:3px;float:left;margin-left:10px;}
	
}




 /*#HdrInner img.logoBrand { height: 80px; vertical-align: middle;  margin-top:10px; margin-bottom:3px;float:left;}*/
@media screen and (max-width: 650px) {
#HdrInner { text-align: center; }
#hideonmibile {display:none;}

#HdrInner img.logoBrand {  width: 500px; height: auto; margin-top:10px;text-align:center;}
}

@media screen and (max-width: 475px) {


#HdrInner { height: auto; }
#HdrInner p { display: none; }
#pconly { display:none; }
#hideonmibile {display:none;}
 }
 
 
 #hideit {display:none;}
 
 /* ==========================================*/
 @media screen and (max-width: 640px) {
 #hppconly{ display:none; }
 }
 @media screen and (min-width: 641px) {
#hpnotpc { display:none; }
 }
 

@media screen and (min-width: 1300px) {
	#LHS { float: right; width: 350px; }
/*#HdrInner img.logoBrand {  width: 350px; height: auto; margin-left:20px;}*/

}
 

/* container for LHS/RHS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#ColOuter { overflow: hidden; }
#RHS { overflow: hidden; }
/*#LHS { float: right; width: 310px; } *//* 3px + 2px + 1px + 2px + 160px + 2px + 1px + 2px */
/*#LHS { float: right; width: 350px; }*/


#Search { display: none; background: #003300; color: #fcfff4; text-align: center; font-size: 14px; padding: 4px; margin-bottom: 2px; }
#Search input { line-height: 20px; font-size: 14px; padding: 1px 3px; width:120px; border: 0; }
#Search input[type="submit"] { line-height: 20px; font-size: 14px; background: #fcfff4; color: #003300; padding: 1px 3px; border: 0; border-radius: 0; width:40px; text-align: center; }

/* responsive */

@media screen and (max-width: 740px) {

#Search { display: block; }
#picinfobox {display: block; border:1px solid #030;}
#pconly { display:none; }
}


@media screen and (max-width: 1300px) {
	#Search { display: block; }
}


@media screen and (min-width: 740px) {
#picinfobox {display:none; }
#mobileonly { display:none; }

}

/* LHS main menu */

ul.mainmenuUL { padding: 0; margin: 3px 0; padding-left:18px; list-style: disc;}
ul.mainmenuUL li a { text-decoration: none; }
ul.mainmenuUL li a:hover { text-decoration: underline; }

/* border container for LHS/RHS */ /*THIS ######################################################################################### */

.container { border: 0px solid #003300; padding: 2px; }
#LHS .container { border-right: 0; }

/* footer panel */

#Footer { border: 1px solid #003300; margin-top: 2px; padding: 10px; text-align: center; }

#FooterNavigation { }
#FooterNavigation h4 { background: #003300; color: #fcfff4; font-size: 14px; font-weight: bold; line-height: 18px; margin: 10px 0 5px 0; padding: 3px 5px; }
#FooterNavigation div { font-size: 14px; text-align: left; line-height: 18px; }
#FooterNavigation a { margin-left: 5px; }

@media screen and (min-width: 550px) {
#FooterNavigation { overflow: hidden; }
#FooterNavigation > div { float: left; width: 30%; padding: 0 1.5%; }
}

/* copyright panel */

#Copyright { border: 1px solid #003300; margin-top: 2px; padding: 10px; text-align: center; }
#Copyright p { margin-bottom: 6px; }

@media screen and (max-width: 550px) {
#Copyright span:first-of-type { display: none; }
#Copyright span { display: block; }
}

/* panels for LHS/RHS */

.panel { border: 0px solid #003300; margin-top: 2px; padding: 6px; }

/*
.imagedetailspanel { border: 0px solid #003300; margin-top: 2px; padding: 6px; background: radial-gradient(circle, rgba(255,255,255,1) 10%, rgba(232,237,232,1) 43%, rgba(178,194,178,1) 82%, rgba(89,123,89,1) 99%, rgba(0,51,0,1) 100%);}
*/

.imagedetailspanel { border: 0px solid #003300; margin-top: 2px; padding: 6px; background: radial-gradient(circle, rgba(255,255,255,1) 85%, rgba(236,241,234,1) 96%, rgba(212,223,208,1) 100%, rgba(138,168,131,1) 100%);}




.panel:first-of-type { margin: 0; }

/* LHS panels have smaller padding */

#LHS .panel { padding: 2px; }

/* h4 in LHS */

#LHS h4
    {
    margin: 2px 0;
    padding: 2px;
    font-size: 14px;
    color: #fcfff4;
    font-weight: bold;
    text-align: center;
    background-color: #003300;
    }
#LHS h4:first-of-type { margin: 0; }

/* advertising links in copyright section */

.advertLinks { font-size: 11px; margin-top: 2px; text-align: center; }
.advertLinks a { font-weight: bold; }

/* banner adverts */

.banner { margin: 4px auto; text-align: center; }

/* primary navivation container */

#NavOuter { background: #003300; margin-bottom: 2px; text-align: center; }
#NavInner {border-top:1px solid #fff; }

/* primary navigation drop menu */

#cssmenu {
  font-size: 15px;
  font-weight:bold;
  background-color: #ccc; /* top level bg color*/
  
  color:#333;
 /* text-transform:uppercase;*/
  
  
  
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#cssmenu > ul li#responsive-tab {
  display: none;
}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-transform:uppercase;
  
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}


#cssmenu > ul li.has-sub ul {
  display: none;
text-align: left;
z-index: 9999;
  width: 200px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ccc;/*drop down bg*/
    color:#000;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}

/* main top level */
#cssmenu > ul li.has-sub > a {
  color:#000000;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #003300;
}
/* main top level */
#cssmenu > ul li a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
    color: #000000;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #003300;
  color: #ccc;
}
/*the drop-down links */
#cssmenu > ul li.has-sub ul li a { color: #333; }

#cssmenu > ul li.has-sub ul li a.active,
#cssmenu > ul li.has-sub ul li a:hover {
    background: #003300; /*drop don hover bg color*/
    color: #fff;
}




@media screen and (max-width: 1050px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background-color: #003300;
    color: #ccc;
	
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #003300;
    color: #ccc;
  }
  #cssmenu > ul li {
    display: none;
	
  }
#cssmenu > ul li a {
  padding: 6px 10px; 
  text-transform:uppercase; /*drop down text on tablet etc*/
  
 /*not*/
 
}
  #cssmenu > ul li.has-sub {
    position: relative;
	 
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
text-align: center;
font-size: 13px;
    position: static;
    width: 100%;
    background: #ccc; /* on mobile the dropdown items bg*/
    border: 0 none;
	color: #ccc;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
line-height: 14px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
	/*noy*/
	
  }
  .container { border: 0px; padding: 0px; margin:0px;
  .panel { border: 0px; margin-top: 0px; padding: 0px; }
  
   .container { border: 0px; padding: 0px; }
}


/* Make sure they show even if hidden in mobile view by JS */
@media screen and (min-width: 1050px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
	/*no*/
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
	/*not*/
  }
  
 
}


/* social buttons */

#LHS .social { margin-left: 7px;}
ul.social { display:inline-block; margin: 0; padding: 0;}
.social li { text-align: center; float:left; display: block; margin: 2px; border: none; width: 34px; height: 34px; background: #555; border-radius: 17px; transition:all 0.2s ease-in; }

.social li:before { display: none; }
.social li a { float:left; display:block; text-indent:-9999px; position:relative; width:100%; height:100%; text-decoration:none; }
.social li a:before { content:""; position:absolute; }
.social a:before { background-image: url(/asset/social.png); background-repeat: no-repeat; width: 22px; height: 22px; top: 6px; left: 6px; background-size: 132px 22px; }

.social .twitter    a:before { background-position:    0px 0; }
.social .facebook   a:before { background-position:  -22px 0; }
.social .pinterest  a:before { background-position:  -44px 0; }
.social .googleplus a:before { background-position:  -66px 0; }
.social .instagram  a:before { background-position: -110px 0; }

.social li:hover { background: #006600; }



.thisone {
	
            background: #eee url(https://www.picturesofengland.com/img/X/1203312.jpg) center center;
            max-width: 1000px;
            height:400px;
            border: 0px solid #003300;
            text-indent: -9999px;
}



* {
  box-sizing: border-box;
}

.rowpoe {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.columnpoe {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.columnpoe img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .columnpoe {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnpoe {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/* BELOW IS TEST SLIDESHOW FROM W3SCHOOLS */
* {box-sizing: border-box;}

.mySlides {display: none;}
/* img {vertical-align: middle;} */

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 9.0s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}






/* FOR HOMEPAGE IMAGE GRID */
	<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
 
}

.rowH {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.columnH {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.columnH img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .columnH {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnH {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}